<template>
	<div class="container">
		<div class="content">
			<uni-forms>
				<uni-forms-item style="text-align: center" :error-message="rules.userMsg">
					<image style="width: 120px;height: 35px;margin-bottom: 20px" :src="logo"></image>
					<uni-row type="flex" justify="center">
						<uni-col :xs="24" :sm="18">
							<uni-easyinput errorMessage v-model="userInfo.username" type="text" prefix-icon="person"
								placeholder="输入用户名"></uni-easyinput>
						</uni-col>
					</uni-row>
				</uni-forms-item>
				<uni-forms-item :error-message="rules.passMsg">
					<uni-row type="flex" justify="center">
						<uni-col :xs="24" :sm="18">
							<uni-easyinput errorMessage v-model="userInfo.password" type="password"
								prefix-icon="locked-filled" placeholder="输入密码"></uni-easyinput>
						</uni-col>
					</uni-row>
				</uni-forms-item>
			</uni-forms>
			<uni-row type="flex" justify="center">
				<uni-col :xs="24" :sm="13">
					<button class="btn" @click="handleSubmit">登录</button>
				</uni-col>
				<!-- <uni-col :xs="24" :sm="13">
           <button class="btn" @click="setUpIp">设置IP</button> 
        </uni-col> -->
			</uni-row>
		</div>
	</div>
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog mode="input" title="输入内容" :value="base_ip" placeholder="请输入服务器ip地址" @confirm="handleConfirm">
		</uni-popup-dialog>
	</uni-popup>
</template>

<script setup lang="ts">
	import {UserMapper} from "../../mappers/UserMapper";
	import {UserInfo} from "../../sql/domin";
	import logo from '../../assets/image/logo.png'
	import login from '../../assets/image/login.png'
	import {computed,getCurrentInstance,reactive,ref} from "vue";
	import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
	import UniForms from "../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
	import UniFormsItem from "../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
	import {useStore} from "vuex";
	import {loginService} from "../../pagesVM/login";
	import {BASE_IP} from "../../util/Constants";
	import {base_ip} from "../../util/request";
	import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row.vue";
	import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";
	import {onLoad} from "@dcloudio/uni-app";

	const {
		getNetWorkType,
		onlineLogin,
		checkToken
	} = loginService()

	const store = useStore()


	const inputDialog = ref()

	const setUpIp = () => {
		inputDialog.value.open()
	}

	onLoad(() => {
		// uni.getStorage({
		// 	key: 'userinfo',
		// 	success(res) {
		// 		userInfo.username = res.data.username
		// 		userInfo.password = res.data.password
		// 	},
		// 	fail() {

		// 	}
		// })
	})

	const handleConfirm = (val: string) => {
		uni.setStorage({
			key: BASE_IP,
			data: val,
			success: () => {
				base_ip.value = val
			}
		})
	}

	const userInfo = reactive({
		username: '',
		password: ''
	})


	const rules = reactive({
		userMsg: '',
		passMsg: ''
	})

	const userMapper = UserMapper

	const handleSubmit = async () => {
		if (userInfo.username == null) {
			rules.userMsg == '请输入用户名'
			return
		}
		if (userInfo.password == null) {
			rules.passMsg == '请输入密码'
			return;
		}
		uni.setStorage({
			key: "userinfo",
			data: userInfo
		})
		let res = await getUser(userInfo.username)
		if (res.length === 0) {
			if (await getNetWorkType()) {
				let result = await onlineLogin(userInfo.username, userInfo.password)
				if (result != false) {
					store.dispatch('SETUSER', await insertUser(result))
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}else{
					rules.passMsg = '密码错误'
					return
				}
			}
		} else {
			let user = res[0]
			if (user.password != userInfo.password) {
				rules.passMsg = '密码错误'
				return
			}
			uni.showToast({
				title: '本地用户登录成功。',
				icon: 'none',
				duration: 2000
			})
			setUser(user)
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
	}

	const getUser = async (usernaem: string) => {
		return await userMapper.selectUserByUserName(usernaem)
	}

	const setUser = (user: any) => {
		store.dispatch('SETUSER', {
				id: user.id,
				username: user.username,
				nickname: user.nickname,
				deptId: user.dept_id,
				deptName: user.dept_name,
				password: user.password,
				role: user.role
			}as UserInfo)
	}

	const insertUser = async (data: any) => {
		let user: UserInfo = {
			id: data.data.userId,
			username: data.data.userName,
			nickname: data.data.nickName,
			password: userInfo.password,
			deptId: data.data.deptId,
			deptName: data.data.dept.deptName,
			role: data.data.roles[0].roleKey
		}
		userMapper.insertUser(user)
		return user
	}
</script>

<style scoped>
	* {
		margin: 0px;
		padding: 0px;
	}

	.container {
		position: absolute;
		height: 100%;
		width: 100%;
		background-size: cover;
		background-position: right top;
		background-repeat: no-repeat;
		background-image: url("../../assets/image/login.png");
	}

	.content {
		position: absolute;
		top: 30%;
		left: 30%;
		right: 30%;
	}

	.btn {
		border-radius: 20px;
		background-color: #ff4949;
		margin-left: 30px;
		margin-right: 30px;
		height: 40px;
		text-align: center;
		color: white;
	}
</style>
